<template>
	<view class="lottery-button">
		<view class="list">
			<view class="item">
				<button @click="ruleDialogShow">
					<text>抽奖规则</text>
				</button>
			</view>
			<view class="item">
				<button @click="goHome">
					<text>返回首页</text>
				</button>
			</view>
		</view>

		<lottery2-dialog-rule v-if="ruleDialog.visible" :title="`抽奖规则`" :content="guize" @callback="ruleDialogCallback">
		</lottery2-dialog-rule>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			info: {
				type: Object,
				default () {
					return {
						guize: ''
					}
				}
			},
			showTips: {
				type: String,
				default: "",
			},
			showChoujiangButton: {
				type: Boolean,
				default: false,
			},
			lotteryType: {
				type: String,
				default: "dzp",
			},
			title: {
				type: String,
				default: "中奖名单"
			},
			prizeList: {
				type: Array,
				default () {
					return []
				}
			},
			prePrizeList: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				ruleDialog: {
					visible: false
				}
			}
		},
		computed: {
			isSj() {
				return this.lotteryType == 'sj'
			},
			isDzp() {
				return this.lotteryType == 'dzp'
			},
			isPm() {
				return this.lotteryType == 'pm'
			},
			guize() {
				return this.info.guize + "\n" + this.showTips
			}
		},
		methods: {
			goHome() {
				this.$emit('toHome')
			},
			ruleDialogShow() {
				this.ruleDialog.visible = true
			},
			ruleDialogCallback() {
				this.ruleDialog.visible = false
			}
		}
	}
</script>

<style lang="less" scoped>
	.lottery-button {
		padding: 0 5vw 5vw;

		.list {
			display: flex;
			width: 100%;

			.item {
				flex: 1;
				margin: 0 15px;

				button {
					display: block;
					width: 100%;
					border: 0;
					background: url('https://wx.2024csnl.com/assets/lottery2/lottery2-button.png') center center no-repeat;
					background-size: 100% 100%;

					&::after {
						border: 0;
					}
				}

				text {
					display: block;
					width: 100%;
					height: 40px;
					line-height: 40px;
					color: #ffffff;
				}
			}
		}
	}
</style>